<template>
	<view class="myStore-container">
		<!-- 自定义导航栏 -->
		<u-navbar title="我的商户" :border-bottom="false" title-size="28" title-color="#333">
			<view slot="right" class="right">
				<text v-if="pageType != 'chooseStore' && userStore.userInfo.userRole == '0'" @click="toAuditStore" style="color: #00c582; font-size: 28rpx">审核记录</text>
			</view>
		</u-navbar>

		<!-- 搜索框 -->
		<searchBar v-if="pageType != 'chooseStore'" v-model="searchValue" @search="search" placeholder="输入机柜编号或商户名称" />

		<!-- tab类型切换 -->
		<view v-if="pageType != 'chooseStore'" class="typeTab-box">
			<view @click="switchTab(item)" v-for="item in typeTabList" :key="item.type" :class="{ 'typeTab-item': true, activeTab: currentTab.type == item.type }">
				{{ item.name }}
			</view>
		</view>

		<!-- 商户数量 -->
		<view v-if="pageType != 'chooseStore'" class="store-num">
			<text class="text">数量：</text>
			<text class="num">{{ total }}</text>
		</view>

		<!-- 商户列表区域 -->
		<view class="store-list-box">
			<z-paging ref="paging" :fixed="false" v-model="StoreList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view @click="chooseStore(item)" v-for="(item, index) in StoreList" :key="index" :class="{'card':true, 'activeStore': item == currentStore}">
					<view class="card-detail">
						<!-- 信息区域 -->
						<view class="detail-bigLine">
							<view class="leftPic">
								<image src="" class="storePic" />
							</view>
							<view class="centerName">
								<view class="name">{{ item.name }}</view>
								<view class="No">商户编号：{{ item.id }}</view>
								<view class="deviceNum">设备数量：{{ item.boxCount }}</view>
							</view>
							<view class="rightProfit">
								<view class="profit-box">
									<view class="text">分润</view>
									<view class="profit-num">
										<text class="num">{{ item.actualCommission }}</text>
										<text class="unit">%</text>
									</view>
								</view>
							</view>
						</view>
						<view class="line">
							<view class="label">详细地址</view>
							<view class="value">{{ item.place || '-' }}</view>
						</view>
						<view class="line">
							<view class="label">商家联系人</view>
							<view class="value">{{ item.contacts || '-' }}</view>
						</view>
						<view class="line">
							<view class="label">商家电话</view>
							<view class="value">{{ item.tel || '-' }}</view>
						</view>
						<view class="line">
							<view class="label">负责人员</view>
							<view class="value">{{ item.inspectorName || '-' }}</view>
						</view>
						<view class="line">
							<view class="label">创建时间</view>
							<view class="value">{{ item.createTime || '-' }}</view>
						</view>

						<!-- 底部操作栏区域 -->
						<view v-if="pageType != 'chooseStore'" class="card-footer">
							<view @click="toSetProfit(item)" v-if="userStore.userInfo.userRole == '3'" class="footer-btn noFill">设置分润</view>
							<view @click="toDeviceList(item)" v-if="userStore.userInfo.userRole == '3'" class="footer-btn">设备列表</view>
							<view @click="toAddDevice" v-if="false" class="footer-btn noFill">安装设备</view>
							<view @click="toEditStore" v-if="false" class="footer-btn">编辑</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAdminStoreList } from '@/api/myStore.js';
import { useUserStore } from '@/store/userStore';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';

// 实例化用户store
const userStore = useUserStore();

// 页面数据初始化
onLoad((options) => {
	console.log(options);
	pageType.value = options.pageType;
});

// 页面数据初始化
const initData = (pageNum = 1, pageSize = 10) => {
	switch (userStore.userInfo.userRole){
		case 3:
			getAdminStoreListFun(pageNum, pageSize)
			break;
		default:
			break;
	}
};

// 获取管理员角色的商户列表数据
const getAdminStoreListFun = async (pageNum, pageSize) => {
	const res = await getAdminStoreList({
		name: searchValue.value,
		type: currentTab.value.type,
		pageNum,
		pageSize
	});
	
	if (res.code == 200) {
		total.value = res.total;
		paging.value.complete(res.rows);
	}
};

// 页面类型
const pageType = ref('');

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
	paging.value.reload();
};

// 类型切换列表
const currentTab = ref({ type: 1 });
const typeTabList = ref([
	{
		name: '全部',
		type: 1
	},
	{
		name: '待安装',
		type: 2
	},
	{
		name: '有设备',
		type: 3
	},
	{
		name: '无订单',
		type: 4
	}
]);

// 切换tab类型
const switchTab = (item) => {
	currentTab.value = item;
	initData();
};

// 商户列表
const StoreList = ref([]);
const total = ref('');
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	initData(pageNo, pageSize);
	// paging.value.complete([1, 2, 3, 4]);
};

// 选择商户
const currentStore = ref(null);
const chooseStore = (item) => {
	if (pageType.value != 'chooseStore') return;
	currentStore.value = item;
	uni.$emit('chooseStore', item);
	uni.navigateBack();
};

// 跳转到设置分润页面
const toSetProfit = (item) => {
	uni.navigateTo({
		url: `/subPages/setProfit/index?id=${item.id}`
	});
};

// 跳转到添加设备页面
const toAddDevice = () => {
	uni.navigateTo({
		url: '/subPages/addDevice/index'
	});
};

// 跳转到设备列表页面
const toDeviceList = (item) => {
	uni.navigateTo({
		url: `/subPages/deviceList/index?id=${item.id}&storeName=${item.name}`
	});
};

// 跳转到审核记录页面
const toAuditStore = () => {
	uni.navigateTo({
		url: '/subPages/auditStore/index'
	});
};

// 跳转到编辑商户页面
const toEditStore = () => {
	uni.navigateTo({
		url: '/subPages/addStore/index'
	});
};
</script>

<style lang="scss">
.myStore-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 24rpx;
	background: #f9f9f9;
	overflow: hidden;

	.store-num {
		display: flex;
		align-items: center;
		color: #999;
		height: 82rpx;
		font-size: 24rpx;
		line-height: 34rpx;

		.num {
			color: $uni-main-color;
		}
	}

	.typeTab-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;

		.typeTab-item {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			width: 156rpx;
			height: 52rpx;
			border-radius: 30rpx;
			background-color: #fff;
		}

		.activeTab {
			color: #fff;
			background-color: $uni-main-color;
		}
	}

	.store-list-box {
		height: calc(100vh - 88rpx - 82rpx - 48rpx - 80rpx);

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.card {
			border-radius: 24rpx;
			background-color: #fff;
			padding: 0 24rpx 24rpx;
			margin-bottom: 24rpx;
			border: 2rpx solid #fff;

			&:last-child {
				margin-bottom: 0;
			}

			.card-detail {
				padding-top: 24rpx;

				.detail-bigLine {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					min-height: 124rpx;

					.leftPic {
						height: 100%;
						margin-right: 24rpx;

						.storePic {
							width: 124rpx;
							height: 124rpx;
							border-radius: 24rpx;
						}
					}

					.centerName {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						padding-top: 16rpx;

						.name {
							font-family: PingFang SC;
							font-size: 32rpx;
							font-weight: 500;
							line-height: 36rpx;
							color: #333;
						}

						.No,
						.deviceNum {
							font-family: PingFang SC;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 36rpx;
							color: #333;
						}
					}
				
					.rightProfit {
						.profit-box {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							width: 120rpx;
							height: 80rpx;
							border-radius: 16rpx;
							background: rgba(0, 197, 130, 0.06);
							
							.text {
								color: #666;
								font-size: 20rpx;
								margin-bottom: 4rpx;
							}
							
							.profit-num {
								.num {
									color: $uni-main-color;
									font-size: 28rpx;
									line-height: 32rpx;
								}
								
								.unit {
									color: $uni-main-color;
									font-size: 20rpx;
									line-height: 32rpx;
								}
							}
						}
					}
				}

				.line {
					display: flex;
					justify-content: space-between;
					margin-top: 24rpx;

					.label {
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #999;
						width: 8em;
						white-space: nowrap;
						margin-right: 16rpx;
					}

					.value {
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #333;
					}
				}

				.card-footer {
					display: flex;
					gap: 24rpx;
					justify-content: flex-end;
					border-top: 2rpx solid #f0f0f0;
					padding: 24rpx 0;
					margin-top: 24rpx;

					.footer-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						width: 144rpx;
						height: 56rpx;
						border-radius: 12rpx;
						background-color: $uni-main-color;
					}
					
					.noFill {
						color: $uni-main-color;
						border: 2rpx solid $uni-main-color;
						background-color: #fff;
					}
				}
			}
		}
	
		.activeStore {
			border: 2rpx solid $uni-main-color;
		}
	}
}
</style>
